import React from 'react';
import { 
  ExperimentOutlined, 
  ThunderboltOutlined, 
  MessageOutlined, 
  SafetyCertificateOutlined 
} from '@ant-design/icons';

const TechCard = ({ icon, title, description, iconBgColor, iconColor }) => (
  <div className="card-hover bg-gray-50 dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 fade-in">
    <div className="flex items-start">
      <div className="flex-shrink-0 mt-1">
        <div className={`w-10 h-10 rounded-lg ${iconBgColor} flex items-center justify-center`}>
          {icon}
        </div>
      </div>
      <div className="ml-4">
        <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">{title}</h3>
        <p className="text-gray-600 dark:text-gray-400">{description}</p>
      </div>
    </div>
  </div>
);

const TechSection = () => {
  const techFeatures = [
    {
      icon: <ExperimentOutlined className="text-primary-600 dark:text-primary-400" />,
      title: "先进AI模型",
      description: "集成Stable Diffusion等先进AI图像处理模型，针对不同艺术风格优化参数，确保高质量的转换效果。",
      iconBgColor: "bg-primary-100 dark:bg-primary-900",
      iconColor: "text-primary-600 dark:text-primary-400"
    },
    {
      icon: <ThunderboltOutlined className="text-secondary-600 dark:text-secondary-400" />,
      title: "高效处理流程",
      description: "优化的图像处理队列管理和服务器资源分配，平衡速度与质量，处理时间控制在10-30秒内。",
      iconBgColor: "bg-secondary-100 dark:bg-secondary-900",
      iconColor: "text-secondary-600 dark:text-secondary-400"
    },
    {
      icon: <MessageOutlined className="text-green-600 dark:text-green-400" />,
      title: "混合交互能力",
      description: "结合图像风格转换与文本指令编辑的混合能力，通过自然语言描述进一步定制图像效果。",
      iconBgColor: "bg-green-100 dark:bg-green-900",
      iconColor: "text-green-600 dark:text-green-400"
    },
    {
      icon: <SafetyCertificateOutlined className="text-blue-600 dark:text-blue-400" />,
      title: "安全可靠",
      description: "严格的API安全措施和临时图像存储机制，保护用户隐私和数据安全。",
      iconBgColor: "bg-blue-100 dark:bg-blue-900",
      iconColor: "text-blue-600 dark:text-blue-400"
    }
  ];

  return (
    <section id="tech" className="py-16 bg-white dark:bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">技术优势</h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">基于先进AI技术，为您提供高质量的图像风格转换体验</p>
        </div>
        
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
          {techFeatures.map((feature, index) => (
            <TechCard key={index} {...feature} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default TechSection; 